<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>
<script lang="ts">
import { defineComponent, reactive, Ref, ref, provide, watch, computed } from 'vue';
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute } from 'vue-router';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { Crumb, useMenu } from 'pf-component';
import { useStore } from 'vuex';
import { cacheUtils } from '@/constants/util/cache-utils';

export default defineComponent({
  props: {},
  components: {},
  setup() {
    const route = useRoute();
    const store = useStore();
    const MenusData = computed(() => {
      return store.getters['menus/allMenus'];
    });

    const crumbs: Crumb[] = reactive(cacheUtils.get('crumbs') || []);
    const activeCrumb: Ref<string> = ref('');
    const activeMenuId: Ref<string> = ref('');
    provide('crumbs', crumbs);
    provide('activeCrumb', activeCrumb);
    provide('activeMenuId', activeMenuId);

    watch(
      () => route.name,
      () => {
        // console.log(route.fullPath, route.path);
        if (!route.name) return;
        // fullpath带有query参数，不使用
        useMenu().refreshCrumbs(
          route.path,
          route.fullPath,
          route.name as string,
          route.params,
          route.meta,
          crumbs
          // MenusData.value
        );
        cacheUtils.set('crumbs', crumbs);
        // 跳转的路由：不是菜单 && 没有meta信息则不加到crumbs
        if (route.path) {
          activeCrumb.value = route.path;
          activeMenuId.value = (route.meta.activeMenu as string) || route.path;
        }
      }
    );
    return {
      locale: zhCn
    };
  }
});
</script>
